<template>
  <div class="look-back-ls-box">
    <VideoCom ref='videoCom' :videoInfo='videoInfo.videoInfo' type='wScreen' status="liveback" 
      @getVideoLoading="getVideoLoading" :courseInfo="courseInfo" />
      <div class="course_video_cover_wrap" v-if="isCourseCoverImg">
        <CourseVideoCover :mode="videoInfo.videoInfo.mode" :videoInfo='videoInfo' :courseInfo="courseInfo" @formChildMsg='formChildData' />
      </div>
      <!-- <div class="float-video"  @click="floatVideo">一键浮窗</div> -->
    <!-- <div class="video-cover-box" v-if="videoCoverBox">
      <div class="loadingGif" v-show="imgLoading||(!imgLoading&&videoLoading&&!isPlayBtn)"></div>
      <img class="cover-video-img" :src="videoInfo.videoInfo.preImagUrl"
        v-show="videoInfo.videoInfo.preImagUrl && videoInfo.videoInfo.preImagUrl != '' " />
      <div class="play-btn" v-if='isPlayBtn' @click="playBtn"></div>
      <div class="course_video_cover_wrap" v-if="isCourseCoverImg">
        <CourseVideoCover :mode="videoInfo.videoInfo.mode" :videoInfo='videoInfo' :courseInfo="courseInfo" />
      </div>
    </div> -->
    <!--光大邀请卡的游客确认提示框-->
    <InvitePop v-if='inviteIsShow' @formChildMsg='formChildData' type='lookBackPage' />
    <MiddleVideoInfo :videoInfo='videoInfo' />
    <!-- tab组件 -->
    <MiddleNavCom :navTabArray="navTabArray" v-if='isNoNav' @formChildMsg='formChildData' />
    <!--内容区域动态组件-->
    <keep-alive>
      <component :is='isContentCom' ref='refContent' :noNavLength='noNavLength' 
        :videoInfo="videoInfo" :courseInfo="courseInfo" :imMsgItem='imMsgItem' :imOfficalMsgItem='imOfficalMsgItem' :isFrom ="'landspaeBackCom'"
        :imReplyMsgItem='imReplyMsgItem' @formChildMsg='formChildData'  
      />
    </keep-alive>
    <!-- <MessgaeCom :lookBack_xq="videoInfo.videoInfo" :key='addNum' /> -->
    <!--<FooterCom  v-show='isContentCom=="MessgaeCom"'   :videoInfo='videoInfo' @formChildMsg='formChildData' />-->
    <!--底部弹出面板-->
    <transition name="actionSheetBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
      @after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
      <component :is="showActionSheet" :videoInfo='videoInfo'  :activeDataArray='activeDataArray'
        :activeTitle='activeTitle' @formChildMsg='formChildData'></component>
    </transition>
    <!--右侧互动组件-->
    <InteractionRightLookBackCom :activityArray='activityArray'  :isInviteSwicth='isInviteSwicth'
      :shoppingDataInfo='shoppingDataInfo' :videoInfo='videoInfo' 
       :inviteImg='inviteImg' :isYqyl='isYqyl' :isLsPoScreen="'LscreenLive'"
      @formChildMsg='formChildData' />
    <!--邀请卡组件-->
    <InvitationCard v-if='isInvitationCard' @formChildMsg='formChildData'  fromComPage = "back"  :liveInfo="videoInfo.videoInfo"
      :fromCom="fromCom" />
    <!-- 全局背景层组件 -->
    <GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
      <!-- 赞动画 -->
     <ZanAnimation v-show="selectNavType === 1"></ZanAnimation>
	 <canvas class="canvas-box" ref="canvasBox" id="canvasBox"></canvas>
	 
	<!-- <img  class="canvas-img" :src="canvasImg" > -->
  <!-- 举报留言弹窗 -->
	<van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round"
				:position="popupObj.position" overlay-class="popClass" :overlay='popupObj.isOverlay'
				:style="{width:popupObj.width,height:popupObj.height }"  @click-overlay = "clickVanOverlay" >
				<component :is="isPopupCom" :meetingMsg="meetingMsg" :shoppingDataInfo='shoppingDataInfo' :reportMsgObj="reportMsgObj"   typeFrom = 'lsBack'  :videoInfo="videoInfo" 
					@formChildMsg='formChildData'>
				</component>
		</van-popup>
    <BuyRisk v-if="isBuyRisk" :buyRiskObj ="buyRiskObj" :shoppingLinkInfo="shoppingLinkInfo" @formChildMsg="formChildData"></BuyRisk>
    <!-- 第三方外链返回按钮 -->
    <BackHomePage v-if="isJump" :toJump="toJump" />
  </div>
</template>

<script>
  import wxApi from '../../../../util/wxApi';
  import socket from '../../../../util/Socket';
  import fun from "@/util/function";
  import backMixin from "@/mixins/backMixin.js"
  import liveBackMixin from "@/mixins/liveBackMixin.js"
  import VideoCom from '@/components/videoCom.vue';
  import MiddleVideoInfo from './middleVideoInfo.vue';
  import MessgaeCom from './messageCom.vue';
  import CourseList from './CourseList.vue';
  import InteractionRightLookBackCom from '../../interactionRightLookBackCom.vue'; //右侧互动组件
  import OrderList from '@/components/actionSheet/orderList.vue'; //商品列表
  import InvitationCard from '@/pages/invitationCard/newInvitationCard.vue'; //邀请卡组件
  import InvitePop from '@/components/invitePop.vue'; //光大邀请卡
  import MiddleNavCom from "@/pages/liveRoomPages/components/lsComponents/middleNavCom.vue"; //中间nav信息组件  回看和直播间公用一个组件
  import LookBack from "./lookBack.vue"; // 回看回看组件
  import LookCurProduct from "./lookCurProduct.vue"; // 图文组件
  import LookCurProduct2 from "./lookCurProduct2.vue"; // 图文2组件
  import LookInvitationList from "./lookInvitationList.vue"; // 回看邀请榜组件
  import ZxyhLiveInvitationList from "@/components/actionSheet/zxyhLiveInvitationList.vue"//中信银行邀请榜
  import LookLinks from "./lookLinks.vue"; // 回看图片外链组件
  import {
    activityArrayLoc
  } from '@/store/dataList.js'; //模拟假数据
  import FooterPop from '@/components/activeCom/footerPop'; //活动底部弹出框
  import GlobalMask from '@/components/globalMask'; //全局背景层组件
  import ApplyInfo from '@/components/applyInfo'//报名 中奖信息组件
  import ReportPop from '@/components/reportPop' //举报
  import ZanAnimation from '@/components/zanAnimation.vue';
  import CourseVideoCover from '@/components/zxjtqh/CourseVideoCover.vue'; // 未购买课程视频cover
  import BackHomePage from '@/components/backHomePage' //三方外链返回首页按钮
  import meetingSummaryCom from '@/pages/liveRoomPages/components/meetingSummaryCom'//会议纪要弹出框
	import meetingMaterialCom from '@/pages/liveRoomPages/components/meetingMaterialCom'//会议材料弹出框
	import cleckMaterialCom from '@/pages/liveRoomPages/components/cleckMaterialCom'//查看会议材料弹出框
	import downloadMaterialCom from '@/pages/liveRoomPages/components/downloadMaterialCom'//下载会议材料弹出框
  import { shoppingInfo  } from '@/util/api.js'
  import dayjs from 'dayjs';
  export default {
    mixins: [wxApi, socket,backMixin,liveBackMixin],
    props: {
      videoInfo: Object,
      courseInfo: Object || null,
    },
    components: {
      VideoCom, //视频组件
      MiddleVideoInfo, //中间信息组件
      MessgaeCom, //留言区域
      InteractionRightLookBackCom, //右侧互动组件
      OrderList, //商品列表
      InvitationCard, //邀请卡组件
      InvitePop, //光大游客提示
      MiddleNavCom, //中间nav信息组件  回看和直播间公用一个组件
      LookCurProduct, //图文
      LookCurProduct2, //图文2
      LookLinks, //回看图片外链组件
      LookBack, //回看回看组件
      LookInvitationList, // 回看邀请榜组件
      ZxyhLiveInvitationList,//中信银行邀请卡组件
      FooterPop, //底部弹出层组件
      GlobalMask, //全局背景层组件
      ApplyInfo,//中奖信息组件
      ReportPop,//举报
      ZanAnimation,//赞 上方效果
      CourseList, // 课程列表
      CourseVideoCover, // 未购买课程视频cover
      BackHomePage, //三方外链返回首页按钮
      meetingSummaryCom,//会议纪要弹出框
			meetingMaterialCom,//会议材料弹出框
			cleckMaterialCom,//查看会议材料弹出框
			downloadMaterialCom,//下载会议材料弹出框
    },
    data() {
      return {
        videoId: this.$route.params.id, //回看传过来的id
        videoCoverBox: true, //视频覆盖层
        isPlayBtn: false, //播放按钮显示不显示
        loadCompleted: false, //图片加载完毕
        isInviteSwicth: false, //邀  显示不显示
        isInvitationCard: false, //展示邀请卡组件
        fromCom: 'hLookBack',
        inviteIsShow: false, //邀 光大游客提示 选择
        getPlatform: fun.getPlatform(), //app wx
        noNavLength: '', //没有nav配置
        isNoNav: true, //有没有nav
        navTabArray: this.videoInfo.tables, //nav 数据this.roomInfo.tables
        isContentCom: null, //留言区域组件
        preImagUrl: '',
        imgLoading: true, // 图片加载
        videoLoading: true, // 视频加载
        inviteImg: require('../../../../assets//images/live_icon/yaoqing.png'), //邀默认图片
        isYqyl: false, //邀请有礼
        isZyzqApp: window.isZyzqApp,
        activityArray: [], //活动数组
        activeDataArray: [], //单个活动数组
        activeTitle: '', //活动标题
        showActionSheet: '', //动态组件名字
        lookBackInterval:'',
        timerNum:0,
        timerNumSwitch:true,
				banner: [],
				txBase: '', //用户头像
				postImg: '', //封面图
				liveTime: '', //预告时间
				clockImg: require('@/assets/images/invite/clock.png'), //时间icon
				mengCengApp: require("@/assets/images/inviteApp/mengceng.png"), //蒙层
				mengCeng: require("@/assets/images/invite/mengCeng.png"), //蒙层
				wBg: require('@/assets/images/invite/s_white.png'), //白底
				reduceVal: 1200,
				canvasImg:'',
				vantPopupShow: false,
				isPopupCom: '', //弹出框
				popupObj: {
					'position': '',
					'width': '',
					'height': '',
					'isOverlay': true,
					'round':false,//圆角
					'isPopupGlobalMask':true,//蒙层是否点击消失
				},
        selectNavType: this.videoInfo.videoInfo.courseId ? 0 : 1, // 默认navType
        isCourseCoverImg:false,//付费课程覆盖层
        isBuyRisk:false,//是否打开购物车购买风险弹窗
        shoppingLinkInfo:{},//购物车当前点击商品信息
        shoppingDataInfo:{},
        buyRiskObj:{},
        isJump: false, // 是否为第三方外链进入
        toJump: '', //从那个机构跳转过来
        meetingMsg: {},//给会议材料组件的数据
      }
    },
    watch: {
      uinfo(curVal, oldVal) {
        if (curVal.un != undefined && curVal.un.length > 0) {
          this.un = curVal.un;
          this.nickname = curVal.nickname;
          this.wxpic = curVal.wxpic;
          this.getCardER(); //邀请里面二维码
          this.invitationCardFun(this.wxpic);
        }
      },
      isLoadIcon(val, oldVal) {},
      closeLoading: {
        handler(e) {
          if (!e.videoLoading && !e.isPlayBtn && this.loadCompleted) {
            this.videoCoverBox = false;
            //this.$refs.videoCom.playStart()
          }
        },
        deep: true
      },
    },
    computed: {
      uinfo() {
        return this.$store.state.userInfo;
      },
      isGlobalMask() { //操作面板外层透明蒙版 显示
        return this.$store.state.globalMask.isShow
      },
      isLoadIcon() {
        if (this.$store.state.SysOrgInfo.icon) {
          this.wxRegister(this.wxRegCallback);
          return true
        } else {
          return false
        }
      },
      closeLoading() {
        return {
          isPlayBtn: this.isPlayBtn,
          videoLoading: this.videoLoading
        }
      },
    },
    created() {
      const {videoInfo:{courseId}} = this.videoInfo;
      if(this.courseInfo){
        //priceType  0-免费，1-付费  haveBuy true 购买 false 未购买
        const { priceType, haveBuy ,shelveType } = this.courseInfo;
        if((courseId  && !haveBuy) || shelveType == 2){
            this.isCourseCoverImg = true
        }
      }
      if (window.terminal.isZxjtApp) {
        this.banner = [{
            url: require('@/assets/images/inviteApp/1.png'),
            title: "蓝色简约"
          },
          {
            url: require('@/assets/images/inviteApp/2.png'),
            title: "限时抢购"
          },
          {
            url: require('@/assets/images/inviteApp/3.png'),
            title: "看直播赢好礼"
          },
          {
            url: require('@/assets/images/inviteApp/4.png'),
            title: "标准版"
          },
          {
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},	
        ]
      } else {
        this.banner = [{
            url: require('@/assets/images/invite/1.png'),
            title: "蓝色简约"
          },
          {
            url: require('@/assets/images/invite/2.png'),
            title: "限时抢购"
          },
          {
            url: require('@/assets/images/invite/3.png'),
            title: "看直播赢好礼"
          },
          {
            url: require('@/assets/images/invite/4.png'),
            title: "标准版"
          },
          {
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},	
        ]
      }
      //浮窗direction
      let channelArr = ['zxjt'];
      if (channelArr.includes(this.$channel)){
        let modeArr = [0, 2];
        let {
          mode
        } = this.videoInfo.videoInfo; //0 横屏   其他竖屏
        if (mode == null) {
          mode = '0'
        }
        let direction = modeArr.includes(mode) ? '0' : '1';
        this.$store.dispatch('setFloatVideoDirection',direction);
      }
      if (this.videoInfo.hasOwnProperty('tables') && this.videoInfo.tables.length) { //有且不为0
        if (this.videoInfo.tables.length == '1') {
          this.noNavLength = 'noNav';
          this.isNoNav = false;
        } else {
          this.isNoNav = true;
        }
        switch (this.selectNavType) {
          case 0: // 课程列表
            this.isContentCom = 'CourseList';
            break;
          case 1: //留言
            this.isContentCom = 'MessgaeCom';
            break;
          case 2: //直播间回看
            this.isContentCom = 'LookBack';
            break;
          case 3: //图文
            this.isContentCom = 'LookCurProduct';
            break;
          case 4: //邀请卡
            this.isContentCom = this.$channel=='zxyh'?'ZxyhLiveInvitationList':'LookInvitationList';
            break;
          case 5: //热门产品
            this.isContentCom = 'LookLinks';
            break;
          case 6: //图文2
            this.isContentCom = 'LookCurProduct2';
            break;
          default:
            break;
        }
      } else { //设置 显示留言组件
        this.isNoNav = false;
        this.noNavLength = 'noNav';
        this.isContentCom = 'MessgaeCom';
      }
      //存直播间url
      let backVideoUrl = window.location.href
      this.$lockr.set("PlayBackVideoUrl", backVideoUrl)
      fun.dotNum('lookBack_particulars_page'); //打点
      this.addLookBackRecord(); //添加观看记录
      this.getShoppingData();
       const {videoInfo:{video}} = this.videoInfo;
       if(video){
     	  this.$store.dispatch("videoSrc", video);
       }    
      let {
        invite,
        diyImgUrl
      } = this.videoInfo.videoInfo
      if (invite == '1') { //邀请卡开关   0 关 1开 2邀请有礼 3自定义
        this.isInviteSwicth = true;
      } else if (invite == '2') {
        this.isYqyl = true
      } else if (invite == '3') {
        this.isInviteSwicth = true;
        this.inviteImg = diyImgUrl
      } else { //默认为false

      }
      //设置邀请卡里面的二维码没有确认un是否有值  因为不计数
      //let shareUrl = "liveBack/" + this.$route.params.id + "?fromUn=" + this.$store.state.userInfo.un;
     if (this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
     	this.un = this.$store.state.userInfo.un;
     	this.nickname = this.$store.state.userInfo.nickname;
     	this.wxpic = this.$store.state.userInfo.wxpic;
     	this.getCardER(); //邀请里面二维码
     	this.invitationCardFun(this.wxpic);
     }
      //活动
      fun.getActivityData(2, this.videoId, (res) => {
        this.activityArray = res.data.data;
      });
     //this.setIntervalLookBack();
      // 是否为三方外链跳转
      if(!!window.sessionStorage.getItem('isJump')){
        this.isJump = !!window.sessionStorage.getItem('isJump')
        this.toJump = window.sessionStorage.getItem('toJump')
      }
    },
    mounted() {
      this.initWebSocket('/liveSocket/backVideo?token=' + this.$token + '&plat=' + fun.getPlatform() + '&vid=' + this
        .videoId + '&channel=' + this.$channel + '&source=' + this.$source);
      // 判断图片是否加载完毕
      if (this.videoInfo.videoInfo.preImagUrl && this.videoInfo.videoInfo.preImagUrl != '') {
        var newImg = new Image();
        newImg.src = this.videoInfo.videoInfo.preImagUrl + '?x-oss-process=image/resize,m_fixed,h_424,w_750';
        newImg.onerror = () => {
          console.log("图片加载失败")
        }
        newImg.onload = () => {
          this.isPlayBtn = true;
          this.preImagUrl = newImg.src;
          this.imgLoading = false;
          this.loadCompleted = true;
        }
      }
    },
    methods: {
      clickVanOverlay(){
        if(this.isPopupCom == 'SmsVer'){

        }else{
          this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
        } 
      },
      getCardER(){
        let url = fun.getCurPageUrl("back", this.videoId);
        this.$lockr.set("ERcode", url);
      },
      invitationCardFun(txImg) {
        if (!this.$store.state.isYk) { //非游客
          if (txImg == null || txImg.includes('gd_mr')) { //游客容错
            this.txBase = require('@/assets/images/gd_mr.png')
          } else {
            this.getImgBase64(txImg, 'tx');
          };
      
          let {
            videoInfo: {
              imagUrl
            }
          } = this.videoInfo;
          //封面图 img
          this.getImgBase64(imagUrl, 'back');
        }
      },
      // 本地将url转成base64格式
      getImgBase64(url, source) {
        window.fun.getBase64(url, source,(res) =>{
          if (source === "back") {
            this.postImg = res; // 将结果赋值给需要用的变量属性
          }  else {
            this.txBase = res;
          }
        })
      },
      setIntervalLookBack() {
        this.lookBackInterval = setInterval(this.setInterFun, 3000);
      },
      setInterFun: function() {
        this.timerNum += 3
        if(this.timerNum > 60 && this.timerNumSwitch){
            this.timerNumSwitch = false;
            if (this.$channel === config.MSYH && window.terminal.weixin && window.isUc != '1') { //  isUc 已经判断民生 微信    通行证
              fun.msySkipSinePage('back', this.$route.params.id, this.videoInfo.source) //调用微信 民生银行通行证
              return
            }
        }
      },
      // 点击播放
      playBtn() {
        this.playBegin();
      },
      playBegin() { //开始播放
        if(this.courseInfo){
        //priceType  0-免费，1-付费  haveBuy true 购买 false 未购买
        const { haveBuy  } = this.courseInfo;
        if(!haveBuy){
          fun.toastMessage('若需观看请前往中信建投期货金建投APP“精品课程”栏目订阅该课程');
          return 
        }
      }
        this.$refs.videoCom.playStart();
        this.isPlayBtn = false;
      },
      // 监听视频是否加载完毕
      getVideoLoading(val) {
        this.videoLoading = val
      },
      formChildData(data) { //子组件传过来的数据
        const { title, creator } = this.videoInfo.videoInfo;
        switch (data.type) {//中信银行app分享
          case 'closeSmsVer'://关闭短信验证弹框
            this.vantPopupShow = false;
            break;
           case 'report'://举报
              this.$store.dispatch("globalMask", {isShow: true,bgColor: 'rgba(0,0,0,0.2)'});
              this.showActionSheet = 'ReportPop'
             break;
               case 'closeReportPop'://关闭举报
              this.$store.dispatch("globalMask", {isShow: false,bgColor: ''});
              this.showActionSheet = ''
             break;
          case 'share':
             fun.zxyhShareOut(this.videoInfo.videoInfo, 'liveBack', this.videoId, this.$store.state.userInfo.un, this.$store.state.SysOrgInfo)
          break;
          case 'applyInfo': //报名中奖信息
               this.$store.dispatch("globalMask", {
                isShow: true,
                bgColor: ''
              });
              this.showActionSheet = 'ApplyInfo'
           break;
           case 'closeApplyInfo': //报名中奖信息
               this.$store.dispatch("globalMask", {
                isShow: false,
                bgColor: ''
              });
             this.showActionSheet = ''
           break;
          case 'activityChildArray': //单个活动数据
            this.activeDataArray = data.data;
            this.activeTitle = data.data.name;
            this.$store.dispatch("globalMask", {
              isShow: true,
              bgColor: ''
            });
            this.showActionSheet = 'FooterPop';
            break;
          case 'closeInvitation': //关闭邀请卡组件
            this.isInvitationCard = false;
            break;
          case 'clickInvite': //点击邀
            // 神策打点（邀请）
            $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
              page_name: `回看详情页`,
              user_nickname: this.$store.state.userInfo.nickname,
              live_room_id: this.$route.params.id,
              live_room_name: title,
              live_room_status: '回看',
              live_room_creator: creator,
              function_name: '邀请',
            });
            if (this.$store.state.isYk) { //游客
              let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
              fun.ykDisposeFun(jointUrl);
            } else { //非游客
              if (window.terminal.isZxjtApp) {
              	this.getInviteBgList();
              } else if(window.terminal.isZxjtqhApp){//建投期货app   
                let {shareTitle,shareSubtitle,shareImgurl,} = this.videoInfo.videoInfo
                fun.zxjtqhShare('liveRoom',"22,23,24,1",shareTitle,fun.getCurPageUrl('back', this.videoId),shareSubtitle,shareImgurl)
              } else {
              	this.isInvitationCard = true;
              }
            }
            break;
          case 'navType': //nav tab
            this.selectNavType = data.data;
            switch (data.data) { //有值
              case 0: // 课程列表
                this.isContentCom = 'CourseList';
                break;  
              case 1: //留言
                this.isContentCom = 'MessgaeCom';
                break;
              case 2: //直播间回看
                this.isContentCom = 'LookBack';
                break;
              case 3: //图文
                this.isContentCom = 'LookCurProduct';
                break;
              case 4: //邀请卡
                this.isContentCom = this.$channel=='zxyh'?'ZxyhLiveInvitationList':'LookInvitationList';
                break;
              case 5: //热门产品
                this.isContentCom = 'LookLinks';
                break;
              case 6: //图文
                this.isContentCom = 'LookCurProduct2';
                break;
              default:
                break;
            }
            break;
          case 'clickShoppingBtn': // 点击一键下单
              this.getShoppingData('rightBtnFrom')
              break;
          case 'closeAllPopup': //关闭所有弹出层
          case 'footerOrderListClose':
          case 'footerActionSheetClose':
            this.showActionSheet = ''
            this.$store.dispatch("globalMask", {
              isShow: false,
              bgColor: ''
            });
            break;
          case 'messageSendSuccess': //留言发送成功
            if (this.isContentCom == 'MessgaeCom') {
              this.$refs.refContent.getMessageFirstList()
            }
            break;
          case 'reportMsgData': //举报留言
						this.reportMsgObj = data.data;
						this.popupObj = {
							'position': 'bottom',
							'width': '100vw',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
							},
						this.isPopupCom = 'reportMsgCom'
						this.vantPopupShow = true;
						break;
          case 'footerVantPopClose': 
					case 'closeVantPopup': //关闭vant弹出框组件
						this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
						break;
            case 'openBuyRisk': //打开购物车购买风险弹窗
              this.buyRiskObj = data.data.buyRiskObj
              this.shoppingLinkInfo = data.data.shoppingLinkInfo
              this.isBuyRisk = true;
              break;
            case 'closeBuyRisk': //购物车购买风险弹窗 点击记录
              this.isBuyRisk = false;//关闭
              break;
            case 'meetingSummary'://点击会议纪要弹出窗口
              this.popupObj = {
                'width': '85%',
                'height': '70%',
                'isOverlay': true,
                'round': true,
                'isPopupGlobalMask': true,
              },
                this.isPopupCom = 'meetingSummaryCom';
              this.vantPopupShow = true;
              break;
            case 'meetingMaterial'://点击会议材料弹出窗口
              this.$store.dispatch("globalMask", {
                isShow: true,
                bgColor: ''
              });
              this.showActionSheet = 'meetingMaterialCom'
              break;
            case 'cleckMaterial'://点击查看材料弹出窗口
              this.popupObj = {
                'position': 'bottom',
                'width': '100%',
                'height': 'auto',
                'isOverlay': true,
                'round': true,
                'isPopupGlobalMask': true,
              },
              this.isPopupCom = 'cleckMaterialCom';
              this.vantPopupShow = true;
              this.meetingMsg = data.dataMsg
              break;
            case 'downloadMaterial'://点击下载材料弹出窗口
              this.popupObj = {
                'width': '85%',
                'height': '25%',
                'isOverlay': true,
                'round': true,
                'isPopupGlobalMask': true,
              },
              this.isPopupCom = 'downloadMaterialCom';
              this.vantPopupShow = true;
              this.meetingMsg = data.dataMsg
            case 'subscribeCourseSucess': //付费课程订阅成功
              this.isCourseCoverImg = false;
              this.$emit('sendFather', {type: 'subscribeCourseSucess',data: {}});
              break;
          default:
            break;
        }
      },
	  getInviteBgList() {
	  		  let {videoInfo:{roomId}} = this.videoInfo;
	  		  if(!roomId){
	  			 console.log('roomId为空选取标准版')
	  			let canvasBox = document.getElementById('canvasBox')
	  			let canvas = document.createElement('canvas')
	  			   canvas.width = 646;
	  			   canvas.height = 992;		
	  			   canvasBox.appendChild(canvas);
	  			   this.drawImg('建投版邀请卡')
	  			   canvas.style.display = 'none';
	  		  }else{
				  this.$http.get('/h5live/getShardingImg?roomId=' + roomId).then((res) => {
				  	let {
				  		code,
				  		data
				  	} = res.data
				  	if (code == '000000') {
				  		if(data.length && data.length == '1'){
				  			let canvasBox = document.getElementById('canvasBox')
				  			let canvas = document.createElement('canvas')
				  			   canvas.width = 646;
				  			   canvas.height = 992;		
				  			   canvasBox.appendChild(canvas);
				  				  // this.drawImg('蓝色简约',data)
				  			   this.drawImg(data[0].title,data)
				  			   canvas.style.display = 'none';
				  		 }else{
				  		   console.log('app邀请卡接口返回错误')
				  		 }						
				  	}
				  }, (err) => {
				  	console.log(err);
				  })
			  }

	  },
	  //app 邀请卡//根据title 画图
	  drawImg(title,dataArray) {
	  	let erCode = this.$lockr.get("ERcode")
	  	this.imgBase64ERcode = jrQrcode.getQrBase64(erCode, {
	  		correctLevel: QRErrorCorrectLevel.L,
	  	}); //base64格式二维码
	  	return new Promise((resolve, reject) => {
	  		switch (title) {
	  			case '蓝色简约': //绘制第一张
	  				let c = document.getElementById("canvasBox");
	  				let ctx = c.getContext("2d");
	  				const bg = new Image();
	  				bg.src = this.banner[0].url;
	  				bg.onload = () => {
	  					c.width = 646*2;
	  					c.height = 992*2;
	  					ctx.drawImage(bg, 0, 0, 646*2, 992*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx, TXImg, 270*2, 134*2, 106);
	  						// ctx.drawImage(TXImg, c.width/2 - 51, 173, 104, 104); //起始   +大小
	  						ctx.fillStyle = "#FFFFFF"; //昵称
	  						ctx.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx.textAlign = "center";
	  						ctx.fillText(this.nickname, 323*2,290*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
	  									//绘制二维码
	  									const ERImg = new Image();
	  									ERImg.src = this.imgBase64ERcode;
	  									ERImg.onload = () => {
	  										ctx.drawImage(ERImg, 397*2, 696*2, 172*2,172*2);
	  										fun.dealImage(c.toDataURL("image/png"),
	  											this.reduceVal, (res) => {
	  												//this.canvasImg = res
	  												this.postAppShare(res);
	  												c.style.display = 'none';
	  											})
	  									}
	  						}
	  					}
	  				}
	  				break;
	  			case '限时抢购': //绘制第二张
	  				let c1 = document.getElementById("canvasBox");
	  				let ctx1 = c1.getContext("2d");
	  				const bg1 = new Image();
	  				bg1.src = this.banner[1].url;
	  				bg1.onload = () => {
	  					c1.width = 646*2;
	  					c1.height = 996*2;
	  					ctx1.drawImage(bg1, 0, 0, 646*2, 996*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx1, TXImg, 273*2, 197*2, 99);
	  						// ctx1.drawImage(TXImg, c1.width/2 - 51, 230, 104, 104); //起始   +大小
	  						ctx1.fillStyle = "#FFFFFF"; //昵称
	  						ctx1.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx1.textAlign = "center";
	  						ctx1.fillText(this.nickname, 323*2,338*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx1.drawImage(SCImg, 75*2, 425*2, 496*2, 280*2); //起始   +大小
	  									//绘制二维码
	  									const ERImg = new Image();
	  									ERImg.src = this.imgBase64ERcode;
	  									ERImg.onload = () => {
	  										ctx1.drawImage(ERImg,  397*2, 752*2, 172*2,172*2);
	  										fun.dealImage(c1.toDataURL(
	  												"image/png"), this
	  											.reduceVal, (
	  												res) => {
	  												//this.canvasImg = res
	  										        this.postAppShare(res);
	  												c1.style.display = 'none'
	  											})
	  									}
	  						}
	  					}
	  				}
	  				break;
	  			case '看直播赢好礼': // 绘制第三张
	  				let c2 = document.getElementById("canvasBox");
	  				let ctx2 = c2.getContext("2d");
	  				const bg2 = new Image();
	  				bg2.src = this.banner[2].url;
	  				bg2.onload = () => {
	  					c2.width = 646*2;
	  					c2.height = 996*2;
	  					ctx2.drawImage(bg2, 0, 0, 646*2, 996*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx2, TXImg, 82*2, 228*2, 99);
	  						// ctx2.drawImage(TXImg, 74, 324, 82, 82); //起始   +大小
	  						ctx2.fillStyle = "#FFFFFF"; //昵称
	  						ctx2.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx2.textAlign = "left";
	  						ctx2.fillText(this.nickname, 213*2, 260*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx2.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
	  									//绘制二维码
	  									const ERImg = new Image();
	  									ERImg.src = this.imgBase64ERcode;
	  									ERImg.onload = () => {
	  										ctx2.drawImage(ERImg, 397*2, 695*2, 172*2,172*2);
	  										fun.dealImage(c2.toDataURL(
	  												"image/png"), this
	  											.reduceVal, (
	  												res) => {
	  											   //this.canvasImg = res
	  												this.postAppShare(res);
	  												c2.style.display = 'none';
	  											})
	  
	  									}
	  						}
	  					}
	  
	  				}
	  				break;
	  			case '标准版': // 绘制第四张
	  				let c3 = document.getElementById("canvasBox");
	  				let ctx3 = c3.getContext("2d");
	  				const bg3 = new Image();
	  				bg3.src = this.banner[3].url;
	  				bg3.onload = () => {
	  					c3.width = 646*2;
	  					c3.height = 996*2;
	  					ctx3.drawImage(bg3, 0, 0, 646*2, 996*2);
	  					const TXImg = new Image();
	  					TXImg.src = this.txBase;
	  					TXImg.onload = () => {
	  						fun.circleImg(ctx3, TXImg, 58*2, 193*2, 116);
	  						// ctx3.drawImage(TXImg, 30, 134, 116, 116); //起始   +大小
	  						ctx3.fillStyle = "#000000"; //昵称
	  						ctx3.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
	  						ctx3.textAlign = "left";
	  						ctx3.fillText(this.nickname, 207*2, 233*2);
	  						const SCImg = new Image(); //直播主题图片
	  						SCImg.src = this.postImg;
	  						SCImg.onload = () => {
	  							ctx3.drawImage(SCImg, 55*2, 352*2, 539*2, 305*2); //起始   +大小
	  								//绘制二维码
	  								const ERImg = new Image();
	  								ERImg.src = this.imgBase64ERcode;
	  								ERImg.onload = () => {
	  									ctx3.drawImage(ERImg, 422*2, 723*2, 172*2,172*2);
	  									fun.dealImage(c3.toDataURL("image/png"), this
	  										.reduceVal, (res) => {
	  											//this.canvasImg = res
	  											this.postAppShare(res);
	  											c3.style.display = 'none'
	  										})
	  
	  								}
	  						}
	  					}						
	  				}
	  				break;
            case '建投版邀请卡': // 绘制第五张`
						let c31 = document.getElementById("canvasBox");
							let ctx31 = c31.getContext("2d");
							const bg31 = new Image();
							bg31.src = this.banner[4].url;
							bg31.onload = () => {
								c31.width = 646*2;
								c31.height = 992*2;
								ctx31.drawImage(bg31, 0, 0, 646*2, 992*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										const {name,icon} = this.$store.state.SysOrgInfo || {};	
										const  curUrl = window.location.href;
										let shareTitleCur;
										let shareSubTitleCur;
										if(curUrl.includes('liveRoom')){//直播间  
											const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享						
											const {intro,title,shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl} = this.roomInfo.roomInfo;
											shareTitleCur =  roomShareTitel || title || shareTitle ||` 【 ${name} 】一起来看直播吧！`  // 分享标题
											shareSubTitleCur =  roomShareSubtitl|| shareDesc ||  `精彩直播,尽在 ${name}手机直播！`  //分享描述
										}else{//回看
											const { shareTitle: orgShareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};//机构分享
											const  { shareTitle, shareSubtitle, shareImgurl, subTitle, title }  = this.videoInfo.videoInfo;
											shareTitleCur = shareTitle || title || orgShareTitle || `【 ${name } 】精彩视频`; //分享标题
											shareSubTitleCur = shareSubtitle || shareDesc || `精彩视频,尽在${name}手机直播！`; //分享描述
										}
										fun.drawRoundRectTopRightLeft(ctx31,20*2,0,0,646*2, 365*2,SCImg);									
											//绘制title
											ctx31.fillStyle = "#000000";
											ctx31.font = "80px Arial";
											ctx31.fillText(shareTitleCur.length > 14 ? shareTitleCur.slice(0,14)+'...' : shareTitleCur, 30*2, 435*2);
											//绘制副标题
											ctx31.fillStyle = "#222630";
											ctx31.font = "52px Arial";
											//ctx31.fillText(shareSubTitleCur.length > 20 ? shareSubTitleCur.slice(0,18) +'...' : shareSubTitleCur, 30*2, 500*2);
											fun.textPrewrap(ctx31,shareSubTitleCur,30*2, 500*2,40*2,550*2,2);
												//绘制时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "80px Arial";
                        const { roomId ,beginTime ,crtTime} = this.videoInfo.videoInfo;
											  const time = dayjs(roomId ? beginTime : crtTime).format("MM月DD日 HH:mm");
												ctx31.fillText(time, 30*2, 675*2);
												//绘制开播时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "48px Arial";
												//ctx31.fillText(roomId?'开播时间':'上传时间', 42*2, 598*2);
                        ctx31.fillText('开播时间', 42*2, 598*2);
												//绘制圆角矩形
												ctx31.lineWidth = 2;//边框为14px
												ctx31.strokeStyle = '#ff5a00';
												ctx31.beginPath();
												ctx31.roundRect(30*2, 570*2, 120*2, 40*2, 20);//x,y width height  rad
												ctx31.stroke();																			
											//绘制二维码
											const ERImg = new Image();
											ERImg.src = this.imgBase64ERcode;
											ERImg.onload = () => {
												ctx31.drawImage(ERImg, 478*2, 816*2, 300, 300);
												fun.dealImage(c31.toDataURL("image/png"), this
													.reduceVal, (res) => {
														this.canvasImg = res
														//console.log(res);
														this.postAppShare(res);
														c31.style.display = 'none'
													})
			
											}
									}						
							}
            break;
            default: //自定义
	  			  let  c4 = document.getElementById("canvasBox");
	  			  c4.width = 646*2;
	  			  c4.height = 996*2;
	  			  let ctx4 = c4.getContext("2d");
	  			  let  bg4 = new Image();
	  			  fun.getBase64(dataArray[0].imgUrl, '', function(res) {
	  			  	bg4.src = res
	  			  });
	  			   bg4.onload = ()=>{
	  				 ctx4.drawImage(bg4, 0, 0, 646*2, 796*2);
	  				  const mengCeng = new Image();
	  				  mengCeng.src = this.mengCengApp;  
	  				  mengCeng.onload = ()=>{
	  					  ctx4.drawImage(mengCeng, 0, 463*2, 646*2, 529*2); //起始   +大小
	  					  const TXImg1 = new Image();
	  					  TXImg1.src = this.txBase;
	  					  TXImg1.onload = () => {
	  					  	fun.circleImg(ctx4, TXImg1, 28*2, 828*2, 100);
	  					  	ctx4.fillStyle = "#000000"; //昵称
	  					  	ctx4.font ="normal small-caps 500 60px Microsoft Yahei In-Bold Font";
	  					  	ctx4.fillText(this.nickname, 148*2, 858*2);
	  					  		const ERImg = new Image();
	  					  		ERImg.src = this.imgBase64ERcode;
	  					  		ERImg.onload = () => {
	  					  			ctx4.drawImage(ERImg, 474*2, 807*2, 145*2,145*2);
	  					  			fun.dealImage(c4.toDataURL("image/png"), this.reduceVal, (res) => {
	  					  					//this.canvasImg = res;
	  										this.postAppShare(res);
	  										c4.style.display = 'none'
	  					  				})
	  					  		}
	  					  }
	  				  }
	  			   }					   
	  				break;
	  		}
	  	})
	  },
    postAppShare(base64Pic) {
      base64Pic = base64Pic.slice(23); //删除data:image/jpeg;base64,
      if (!base64Pic) return console.log('canvas 生成base64为空');
      let shareUrl = fun.getCurPageUrl('back', this.videoId);
      const {name} = this.$store.state.SysOrgInfo || {};	
			const {shareTitle:orgShareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
      let {videoInfo: { shareTitle,title, shareSubtitle ,subTitle}} = this.videoInfo;
      //分享
      let shareTitleLive = shareTitle || title || orgShareTitle || '【' + name + '】精彩视频';
      let summary = shareSubtitle || subTitle || shareDesc ||  "精彩视频，尽在" + name + "手机直播！";
      if (window.terminal.isZxjtAndroid) {
        KDS_Native.shareLive(shareTitleLive, shareUrl, summary, base64Pic)
      } else if (window.terminal.isZxjtIos) {
        let json = {
          "title": shareTitleLive,
          "shareUrl": shareUrl,
          "summary": summary,
          "base64Pic": base64Pic
        }
        window.webkit.messageHandlers.shareLive.postMessage(json)
      }
    },
      //一键下单 商品-
      async   getShoppingData(comeFrom) {
        try {
          // let plat = this.$store.state.axiosPlat;
					// if(!plat){
					// 	await fun.initAxiosPlatform()
					// }
          const msgData = await shoppingInfo(this.videoId, '1');
          const { code } = msgData.data;
          if (code === '000000') {
            const { data, data: { goods: { goodsList } } } = msgData.data;
            this.shoppingDataInfo = data;
            if (goodsList.length) {
              if (comeFrom === 'rightBtnFrom') {
                this.popupObj = {
                  'position': 'bottom',
                  'width': this.$store.state.isMobile ? '100%' : '400px',
                  'height': 'auto',
                  'isOverlay': true,
                  'round': true,
                  'isPopupGlobalMask': true,
                },
                this.isPopupCom = 'OrderList';
                this.vantPopupShow = true;
              }
            }
          }

        } catch (error) {
          console.log(error);
        }
        return
        let ua = navigator.userAgent.toLowerCase();
        this.$http.get('/h5live/getRoomGoodsAndTitle?type=1&mixId=' + this.videoId).then((res) => {
          if (res.data.code == '000000') {
            //res.data.data.icon = 'https://saaszhhk.yundzh.com/zhonghanghk/20190801/f7707499298740b08f2542ce384b254a.jpg'
            if (res.data.data.goods.length) {
              this.shoppingIcon = res.data.data.icon; //一键下单图标
              let num = 0;
              if ((/MicroMessenger/i).test(ua)) { //微信
                for (let i = 0; i < res.data.data.goods.length; i++) {
                  if (res.data.data.goods[i].goodsTarget == "1") { // 0 app  1 微信
                    num++;
                    this.shoppingDataInfo.shoppingArray.push(res.data.data.goods[i])
                  }
                }
              } else { //app
                for (let i = 0; i < res.data.data.goods.length; i++) {
                  if (res.data.data.goods[i].goodsTarget == "0") { // 0 app  1 微信
                    num++;
                    this.shoppingDataInfo.shoppingArray.push(res.data.data.goods[i])
                  }
                }
              }
              if (this.shoppingDataInfo.shoppingArray.length != 0) {
                this.isShoppingBtn = true;
                this.shoppingDataInfo.num = num;
                this.shoppingDatatitle = res.data.data.title || '一键下单'
              }
            }

          }
        }, (err) => {

        })
      },
      addLookBackRecord() { //添加观看记录
        if (this.$store.state.isYk) {
          return
        }
        this.$http.post("/h5live/addViewRecord?vid=" + this.videoId).then(
          res => {
            if (res.data.code != "000000") {
              console.log("观看记录接口返回失败")
            }
          },
          err => {
            console.log(err);
          }
        );
      },
    wxRegCallback() {
      const { shareTitle: orgShareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};//机构分享
      const { videoInfo: { shareTitle, shareSubtitle, shareImgurl, subTitle, title } } = this.videoInfo;
      const { SysOrgInfo: { icon, name } } = this.$store.state;
      let opstion = {
        link: fun.getCurPageUrl('back', this.videoId),
        title: shareTitle || title || orgShareTitle || '【' + name + '】精彩视频', //分享标题
        desc: shareSubtitle || subTitle || shareDesc || "精彩视频，尽在" + name + "手机直播！", //分享描述
        imgUrl: shareImgurl || icon, //分享的图片 
        success: () => {
          fun.shareDotNumFun({ ...this.videoInfo.videoInfo, fromTypeLiveBack: 'back', vid: this.videoId });//打点
        },
        error: (e) => {
          fun.shareDotNumFun({ ...this.videoInfo.videoInfo, fromTypeLiveBack: 'back', vid: this.videoId });//打点
        }
      };
      this.ShareTimeline(opstion);
    },
      sheetBeforeEnter(el, done) { //底部面板 弹出之前
        Velocity(
          el, {
            translateY: '100%',
          }, {
            duration: 0,
            easing: "ease-out",
            complete: done
          }
        )

      },
      sheetEnter(el, done) { //底部面板 弹出时
        Velocity(
          el, {
            translateY: '0%'
          }, {
            duration: 500,
            easing: "ease-out",
            complete: done
          }
        )
      },
      sheetAfterEnter(el, done) { //弹出之后
      },
      sheetBeforeLeave(el, done) { //弹入之前
        Velocity(
          el, {
            translateY: '100%'
          }, {
            duration: 800,
            complete: done
          }
        )
      },
      sheetLeave(el, done) {},
      floatVideo(){
        fun.floatSendData({}, '0')
      }
    },
    destroyed() { //组件销毁
       clearInterval(this.lookBackInterval);
    },
  }
</script>

<style lang="less" scoped="scoped">
.float-video{
  padding:20px ;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 100;
  background: darkcyan;
  color: pink;
}
  .look-back-ls-box {
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }


    .course_video_cover_wrap {
      width: 100%;
      height: 424px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 500;
    }

  .loadingGif {
    width: 300px;
    height: 300px;
    position: absolute;
    background: url(../../../../assets/images/loadingImg.gif) no-repeat;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 11;
  }

  .list-header-zyzq~.video-cover-box {
    top: 88px;
  }

  .list-header-zyzq~.land-live-msg /deep/ .comment-box {
    height: 88px;
  }

  .cover-video-img {
    height: 424px;
    width: 100%;
    display: block;
    object-fit: cover;
  }

  .play-btn {
    width: 115px;
    height: 115px;
    background: url(../../../../assets/images/play.png) no-repeat;
    background-size: 115px 115px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -57.5px;
    margin-left: -57.5px;
    z-index: 1000;
  }


  .black-zxyh {
    width: 100%;
    height: 500px;
    background: rgba(0, 0, 0, 0.4);
  }

  .zxyh-bg {
    width: 100%;
    height: 265px;
    background: white;
    display: flex;
  }



  .inner-input {
    width: 556px;
    height: 179px;
    background: #F4F4F4;
    border-radius: 21px;
    padding: 20px;
    font-size: 28px;
    /*font-weight: 500;*/
    color: #949494;
  }

  .header-conatiner /deep/ .header-box {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.2) 100%);
  }

  .header-conatiner {
    position: absolute;
    top: 0px;
    z-index: 11;
  }





  .more_live_btn {
    position: absolute;
    right: 0;
    top: 245px;
    z-index: 1004;
  }

  .middle-nav-box + .pop-up-child,.middle-nav-box + .pop-up-child{
    position: static;
    height: calc(100vh - 564px);
  }
  .canvas-box {
  	width: 646px;
  	height: 992px;
  	margin: 0 auto;
  	background: white;
  	display: none; 
  	position: absolute;
  	top: 20px;
  	left: 20px;
  	z-index: 2222;
  	border-radius: 26px;
  }
  .canvas-img{
  	width: 646px;
  	height: 992px;
  	position: absolute;
  	top: 200px;
  	left: 100px;
  	z-index: 2333;
  }
</style>
